<template>
  <div class="Top">
    <ul class="rtn"><router-link to="/mine">&lt;</router-link></ul>
    <ul class="recor">记录宠物与我</ul>
  </div>
  <div class="page">
    <div class="rect">
      <ul class="avatar"><img src="./项目/宠物日记/头像.png" alt="">
      <li>蓁蓁饺子七</li>
      </ul>
    <div class="rects">
      <ul class="day">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
      </ul>
      <ul class="loc"><img src="./项目/宠物日记/缺角.png" alt=""></ul>
    </div>
    </div>
    <!-- <div v-for="item in left" :key="item">
      <div class="left"><img :src="item" alt=""></div>
  </div> -->
  <!-- <div v-for="item in right" :key="item">
    <div class="right"><img :src="item" alt=""></div>
  </div> -->
  <!-- <ul>
    <li v-for="a in item" :key="a.value">
      <img v-bind:src="a.img" alt="" class="img">
      <a href="#" class="word">{{a.word}}</a>
      <span class="heat">{{a.heat}}</span>
      <img v-bind:src="a.imgurl" alt="" class="imgurl">
      <div>
      </div>
    </li>
  </ul>
  <ul>
    <li v-for="b in items" :key="b.value">
      <img v-bind:src="b.imgs" alt="" class="imgs">
      <a href="" class="words">{{b.words}}</a>
      <span class="heats">{{b.heats}}</span>
      <img v-bind:src="b.imgurl" alt="" class="imgurl">
    </li>
  </ul>
  <div  v-for="c in itemr" :key="c.value">
    <img v-bind:src="c.imgurl"  alt="" class="imgurl">
  </div> -->
  <div class="purple">
    <img src="./项目/宠物日记/矩形18.png" alt="">
    <ul class="notes">生活手记
      <li class="hot">热度值:57.2w</li>
    </ul>
    <ul class="join">
      <img src="./项目/宠物日记/矩形25.png" alt="">
      <li>+&nbsp;立即参加</li>
      </ul>
  </div>
  <div class="yellow">
    <img src="./项目/宠物日记/矩形20.png" alt="">
    <ul class="share">每日一餐分享
      <li class="hot">热度值:455.2w</li>
      </ul>
     <ul class="joins">
      <img src="./项目/宠物日记/矩形25.png" alt="">
      <li>+&nbsp;立即参加</li>
      </ul>
  </div>
  <div class="orange">
    <img src="./项目/宠物日记/矩形22.png" alt="">
    <ul class="clock">随手拍打卡
      <li class="hot">热度值:45.9w</li>
    </ul>
    <ul class="joinr">
      <img src="./项目/宠物日记/矩形25.png" alt="">
      <li>+&nbsp;立即参加</li>
    </ul>
  </div>
  <div class="blue">
    <img src="./项目/宠物日记/矩形19.png" alt="">
    <ul class="viedo">视频快拍
      <li class="hot">热度值:63.6w</li>
    </ul>
    <ul class="jon">
      <img src="./项目/宠物日记/矩形25.png" alt="">
      <li>+&nbsp;立即参加</li>
    </ul>
  </div>
  <div class="green">
    <img src="./项目/宠物日记/矩形21.png" alt="">
    <ul class="pet">每日萌宠打卡
      <li class="hot">热度值:56.1w</li>
    </ul>
    <ul class="attend">
      <img src="./项目/宠物日记/矩形25.png" alt="">
      <li>+&nbsp;立即参加</li>
    </ul>
  </div>
  <div class="red">
    <img src="./项目/宠物日记/矩形23.png" alt="">
    <ul class="bre">养宠分享
      <li class="hot">热度值:91.3w</li>
    </ul>
    <ul class="attends">
    <img src="./项目/宠物日记/矩形25.png" alt="">
    <li>+&nbsp;立即参加</li>
    </ul>
  </div>
  </div>
  
</template>

<script>

export default {
    name:'IndexPet',
    // data(){
    //   return{
    //     item:[
    //       {
    //         img:require('./项目/宠物日记/矩形 18.png'),
    //         word:'生活手记',
    //         heat:'热度值:57.2w',
            
    //       },
    //       {
    //         img:require('./项目/宠物日记/矩形 20.png'),
    //         word:'每日一餐',
    //         heat:'热度值:45.2w',
            
    //       },
    //       {
    //         img:require('./项目/宠物日记/矩形 22.png'),
    //         word:'随手打卡',
    //         heat:'热度值:45.9w',
            
    //       },
    //     ],
    //     items:[
    //       {
    //         imgs:require('./项目/宠物日记/矩形 19.png'),
    //         words:'视频快拍',
    //         heats:'热度值63.6w',
            
    //       },
    //       {
    //         imgs:require('./项目/宠物日记/矩形 21.png'),
    //         words:'每日打卡',
    //         heats:'热度值56.1w'
    //       },
    //       {
    //         imgs:require('./项目/宠物日记/矩形 23.png'),
    //         words:'养宠分享',
    //         heats:'热度值91.3w'
    //       }
    //     ],
    //     itemr:[
    //       {
    //         imgurl:require('./项目/宠物日记/矩形25.png')
            
    //       },
    //       {
    //         imgurl:require('./项目/宠物日记/矩形25.png')
    //       },
    //       {
    //         imgurl:require('./项目/宠物日记/矩形25.png')
    //       }
    //     ]
    //   }
    // }
  // setup(){
  //   let left = reactive({
  //    img: require("./项目/宠物日记/紫色矩形.png"),
  //    imgurl: require("./项目/宠物日记/矩形 20.png"),
  //    imgurls: require("./项目/宠物日记/矩形 22.png"),
  //   })
  //   let right = reactive({
  //    img: require("./项目/宠物日记/矩形 19.png"),
  //    imgurl: require("./项目/宠物日记/矩形 21.png"),
  //    imgurls: require("./项目/宠物日记/矩形 23.png")
  //   })
  //   let join = "+立即参加"
  //   return{
  //     left,
  //     right,
  //     join
  //   }
  // }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
 
  .Top{
    position: relative;
    border: .0625rem solid none;
    background-color: rgb(135, 142, 205);
    width: 100%;
    height: 5rem;;
  }
  .rtn{
    position: absolute;
    color: white;
    font-size: 2.1875rem;
    top: .9375rem;
    left: .625rem;
  }
  .recor{
    position: absolute;
    color: white;
    font-size: 1.25rem;
    left: 8.5rem;
    top: 1.5375rem;
  }
  .page{
    width: 100%;
    height:  42.6875rem;
    background-color: rgb(185, 187, 223);
  }
  .rect{
    position: absolute;
    background-color: rgb(221, 231, 242);
    border: .0625rem solid none;
    width: 16.75rem;
    left: 1.25rem;
    height: 8rem;
    border-radius: 1.25rem;
    margin-top: 1.25rem;
  }
  .avatar{
    list-style: none;
  }
  .avatar>img{
    position: absolute;
    width: 3.125rem;
    height: 3.125rem;
    left: 1.25rem;
    top: .625rem;
  }
  .avatar>li{
    position: absolute;
    left: 5rem;
    top: 1.25rem;
  }
  .rects{
    position: absolute;
    background-color: rgb(221, 231, 242);
    border: 1px solid none;
    width: 20.75rem;
    height: 5rem;
    margin-top: 3.75rem;
    border-radius: 1.25rem;
  }
  .day{
    list-style: none;
  }
  .day>li{
    position: relative;
    display: inline-block;
    font-size: .625rem;
    zoom: 0.7;
    margin-left: 1.25rem;
    color: white;
  }
  .loc>img{
    position: absolute;
    width: 4.125rem;
    height: 4.125rem;
    bottom: 4.4375rem;
    left: 15.75rem;
  }
  .purple>img{
    position:absolute;
    width: 9.775rem;
    left: 1.3625rem;
    margin-top: 12.5rem;
  }
  .blue>img{
    position:absolute;
    width: 9.775rem;
    left: 12.3625rem;
    margin-top: 12.5rem;
  }
  .notes{
    position: absolute;
    left: 2.5625rem;
    margin-top: 12.95rem;
    list-style: none;
  }
  .viedo{
    position: absolute;
    left: 13.5625rem;
    margin-top: 12.95rem;
    list-style: none;
  }
  .share{
    position: absolute;
    left: 2.5625rem;
    margin-top: 19.95rem;
    list-style: none;
  }
  .pet{
    position: absolute;
    left: 13.5625rem;
    margin-top: 19.95rem;
    list-style: none;
  }
  .clock{
    position: absolute;
    left: 2.5625rem;
    margin-top: 26.95rem;
    list-style: none;
  }
  .bre{
    position: absolute;
    left: 13.5625rem;
    margin-top: 26.95rem;
    list-style: none;
  }
  .notes>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
  .viedo>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
   .share>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
  .pet>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
  .clock>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
  .bre>.hot{
    margin-top: .3125rem;
    font-size: .625rem;
    zoom: 0.9;
  }
 .join>img{
    position: absolute;
    width: 5rem;
     left: 2.3625rem;
    margin-top: 15.75rem;
  }
  .jon>img{
    position: absolute;
    width: 5rem;
     left: 13.3625rem;
    margin-top: 15.75rem;
  }
  .joins>img{
    position: absolute;
    width: 5rem;
    left: 2.3625rem;
    margin-top: 22.75rem;
  }
   .attend>img{
    position: absolute;
    width: 5rem;
    left: 13.3625rem;
    margin-top: 22.75rem;
  }
  .joinr>img{
    position: absolute;
    width: 5rem;
    left: 2.3625rem;
    margin-top: 29.75rem;
  }
  .attends>img{
    position: absolute;
    width: 5rem;
    left: 13.3625rem;
    margin-top: 29.75rem;
  }
  .join>li{
     position: absolute;
    width: 5rem;
     left: 2.3625rem;
    margin-top: 15.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
  .jon>li{
     position: absolute;
    width: 5rem;
     left: 13.3625rem;
    margin-top: 15.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
  .joins>li{
     position: absolute;
    width: 5rem;
     left: 2.3625rem;
    margin-top: 22.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
  .attend>li{
     position: absolute;
    width: 5rem;
     left: 13.3625rem;
    margin-top: 22.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
  .joinr>li{
     position: absolute;
    width: 5rem;
     left: 2.3625rem;
    margin-top: 29.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
  .attends>li{
     position: absolute;
    width: 5rem;
     left: 13.3625rem;
    margin-top: 29.75rem;
    list-style: none;
    color: white;
    font-size: .625rem;
  }
   .yellow>img{
    position:absolute;
    width: 9.775rem;
    left: 1.3625rem;
    margin-top: 19.5rem;
  }
  .green>img{
    position:absolute;
    width: 9.775rem;
    left: 12.3625rem;
    margin-top: 19.5rem;
  }
  .orange>img{
    position:absolute;
    width: 9.775rem;
    left: 1.3625rem;
    margin-top: 26.5rem;
  }
  .red>img{
    position:absolute;
    width: 9.775rem;
    left: 12.3625rem;
    margin-top: 26.5rem;
  }
</style>